<template>
  <div class="my">
    <div class="rel">
      <router-link v-if="!isLogin" class="login" to="/login">立即登录</router-link>
      <span v-else class="login">{{ phone }}</span>
      <img class="w100p" src="http://fresh.huruqing.cn/img/bg2.78d35cdc.png" alt="">
    </div>
    <div class="mt-5">
      <van-cell title="我的订单" is-link to="/order" />
      <van-cell title="收藏" is-link to="" />
      <van-cell title="足迹" is-link to="" />
      <van-cell title="优惠券" is-link to="" />
      <van-cell title="我的地址" is-link to="" />
      <van-cell title="设置" is-link to="/my/set" />
    </div>

  </div>
</template>

<script>
import Vue from 'vue';
import { Cell, CellGroup, Field } from 'vant';

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Field);

export default {
  name: 'My',
  data() {
    return {

    }
  },
  computed: {
    isLogin() {
      return !!this.$store.state.token;
    },
    phone() {
      return this.$store.state.phone
    }
  },
  created() {
  }
}
</script>

<style scoped>
.login {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  font-size: 16px;
  z-index: 1;
}
</style>